{% extends template.self %}      
{% block book_sidebar %}
    <nav role="navigation" class="autoshow">
        <ul class="summary">
        <li><a href="https://cocos.com" class="btn" target="_blank"><img src="https://forum.cocos.org/images/logo.png" height="30" /></a></li>
        <li><a href="#" class="btn" onclick="toggleLanguage()">中文</a></li>
        {% for item in book.version %}
        {% if item.links %}
        <li class="version-link">
            <a href="#" class="btn" style="color:#444"></i>Version: <span style="font-weight: bold; display: inline">{{item.name}}</span></a>
            <ul class="hovershow">
                {% for entry in item.links %}
                <li><a href="{{entry.link}}" class="btn">Version: <span style="font-weight:bold; display: inline">{{entry.name}}</span></a></li>
                {% endfor %}
            </ul>
        </li>                
        {% else %}
        <li><a href="{{item.link}}" class="btn"></i>{{item.name}}</a></li>
        {% endif %}
        {% endfor %}  
        {% for item in book.products %}
        {% if item.links %}
        <li>
            <a class="btn"><i class="fa fa-book"></i>{{item.name}}</a>
            <ul>
                {% for entry in item.links %}
                <li><a href="{{entry.link}}" class="btn">{{entry.name}}</a></li>
                {% endfor %}
            </ul>
        </li>                
        {% else %}
        <li><a href="{{item.link}}" class="btn"><i class="fa fa-book"></i>{{item.name}}</a></li>
        {% endif %}
        {% endfor %}
        </ul>
    </nav>
    {{ super() }}
{% endblock %}
{% block javascript %}
    {{ super() }}
    <script type="text/javascript">
    function toggleLanguage () {
            var path = location.href;
            // console.log(path);
            if (path.indexOf('/zh') !== -1) {
                path = path.replace(/\/zh[\/$\s]/i, '/en/');
            } else if (path.indexOf('/en') !== -1) {
                path = path.replace(/\/en[\/$\s]/i, '/zh/');
            }
            // console.log('after: ' + path);    
            location.assign(path);
    }
    (function () {
        // this method is used to avoid the possibility of failure of the URL's anchor on WAN
        function makeSureAnchorJumped () {
            var anchor = window.location.href.split('#')[1];
            if (anchor) {
                var element = document.getElementById(anchor);
                if (element) {
                    var topPos = element.offsetTop;
                    // for Safari browers
                    document.body.scrollTop = topPos;
                    // for IE, Chrome, FireFox, Opera browers
                    document.documentElement.scrollTop = topPos;
                }
            }                              
        }

        function avoidOnLoadConflict (onLoad) {
            if (!window.onload) {
                window.onload = onLoad;
            }
            else {
                var oldFunc = window.onload;
                window.onload = function () {
                    oldFunc();
                    onLoad();            
                };
            }
        }
        avoidOnLoadConflict(makeSureAnchorJumped);
    })();
    </script>
{% endblock %}